<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">积分明细</div>
      </div>
    </header>
    <div class="rangking-details flex-center">
      <div @click="showTimePicker" id="recordYyear" class="year-btn flex-center">
        <span id="recordTimes">{{year}}</span>年
        <img class="arrow_icon" src="../../../../static/images/select_down.png">
      </div>
    </div>
    <div class="mui-page-content rangking-details-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">

          <template v-for="(item,index) in list" >
          <h4 class="work-message-lists">{{item.month}}月</h4>
          <ul class="mui-table-view organization-lists">
            <li class="mui-table-view-cell" v-for="(v,i) in item.list" :key="i">
              <div class="flex-between-center">
                <div class="organization-lists-title">{{v.RULE_NAME}} {{computerScore(v)}}分</div>
                <div class="flex-between-center integral-num">
                  <p>总积分</p>
                  <span class="mine-lists-money">{{v.TOTAL_SCORE_}}</span>
                </div>
              </div>
              <p class="organization-lists-time">{{v.CREATE_TIME_}}</p>
            </li>
          </ul>
          </template>

          <div class="text-center no-data" v-if="list.length===0">
            <img src="../../../../static/images/no_data.png" alt="">
            <p>暂无数据</p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'

  export default {
    name: 'rangkingDetails',
    data() {
      return {
        year: new Date().getFullYear(),
        fn: tools,
        list: [],
        pageIndex: 0,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        data: {},
        rankType: ''
      }
    },
    created() {
      this.data = this.$store.state.buildAssessData
      this.rankType = this.$store.state.rankType
      this.loadData()
    },
    methods: {
      computerScore(item){
        return (item.PLUS_REDUCE_STATUS_ == 1 ? '+' : '-') + item.POINTS_
      },
      onPullingUp() {
        console.log('onPullingUp')
       this.loadData()
      },
      loadData() {
        let data = {
          token: tools.getToken(),
          "checkObject": this.rankType,    //1支部，2个人
          "year": this.year        //年度  yyyy
        }
        loginService.getMoreDetails(data).then(res => {
          if (res.data.length < 1) {
            this.list = []
            return tools.tip('暂无数据')
          }
          this.list = res.data
        })
      },
      showTimePicker() {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            columnCount: 1,
            min: new Date(nowYear - 10, 1, 1),
            max: new Date(nowYear + 1, 1, 1),
            value: new Date(me.year, 1, 1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = new Date(selectedTime).getFullYear()
              this.loadData()
            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: new Date(this.year, 1, 1)
          })
        }, 1000)
      }
    },
    watch: {
      year() {
        this.loadData()
      }
    }
  }
</script>

<style scoped>

</style>
